<style scoped>
.user-detail {
  font-size: 15px;
}
</style>
<template>
  <div>
    <Row>
      <Col span="24">
      <Card class="margin-bottom-10">
        <Form inline>
          <FormItem class="margin-bottom-0">
            <Select v-model="searchConf.game_hash" filterable remote :remote-method="getGameName" style="width:260px"
              clearable placeholder='请选择游戏' :loading="nameLoading">
              <Option v-for="(option, index) in gameNameOption" :value="option.value" :key="index">{{ option.label }}
              </Option>
            </Select>
          </FormItem>
          <FormItem class="margin-bottom-0">
            <Select v-model="searchConf.status" filterable style="width:160px" :clearable="true" placeholder='请选择订单状态'>
              <Option value="0">待支付</Option>
              <Option value="1">已支付</Option>
              <Option value="2">支付失败</Option>
              <Option value="3">金手指</Option>
              <Option value="4">线下支付</Option>
            </Select>
          </FormItem>
          <FormItem class="margin-bottom-0">
            <Select v-model="searchConf.platform" filterable style="width:160px" :clearable="true" placeholder='请选择来源'>
              <Option value="1">IOS</Option>
              <Option value="2">安卓</Option>
              <Option value="3">魅族</Option>
              <Option value="4">VIVO</Option>
              <Option value="5">OPPO</Option>
            </Select>
          </FormItem>
          <FormItem class="margin-bottom-0">
            <DatePicker class="margin-right-10" :type="'daterange'" placeholder="请选择日期" style="width: 220px"
              separator=" ~ " format="yyyy-MM-dd" :value="searchConf.date" @on-change="setFormDate" :transfer="true" />
          </FormItem>
          <FormItem class="margin-bottom-0">
            <Input v-model="searchConf.openid" :clearable="true" style="width:260px" placeholder="请输入OpenId" />
          </FormItem>
          <FormItem class="margin-bottom-0">
            <Input v-model="searchConf.order_num" :clearable="true" style="width:260px" placeholder="请输入订单号" />
          </FormItem>
          <FormItem class="margin-bottom-0">
            <div style="width:120%;display: flex;justify-content: space-around;">
                <Button type="primary" @click="search">{{ $t('find_button') }}/{{ $t('refresh_button') }}</Button>
                <Button type="warning" @click="download">导出</Button>
              </div>
          </FormItem>
        </Form>
      </Card>
      </Col>
    </Row>
    <Row :gutter="12">
      <Col span="14">
      <Row :gutter="16" class="margin-bottom-10" style="width: 100%">
        <Col span="8">
        <Card>
          <div style="text-align:center">
            <Icon type="ios-cash" size="40" />
            <h3>累计收入：<span style="color: #ed4014;font-size: 16px">{{ total.pay }}</span></h3>
            <h3>累计合计：<span style="color: #ed4014;font-size: 16px">{{ total.sum }}</span></h3>
          </div>
        </Card>
        </Col>
        <Col span="8">
        <Card>
          <div style="text-align:center">
            <Icon type="md-basket" size="40" />
            <h3>范围收入：<span style="color: #ed4014;font-size: 16px">{{ range.pay }}</span></h3>
            <h3>范围合计：<span style="color: #ed4014;font-size: 16px">{{ range.sum }}</span></h3>
          </div>
        </Card>
        </Col>
        <Col span="8">
        <Card>
          <div style="text-align:center">
            <Icon type="ios-card" size="40" />
            <h3>今日收入：<span style="color: #ed4014;font-size: 16px">{{ today.pay }}</span></h3>
            <h3>今日合计：<span style="color: #ed4014;font-size: 16px">{{ today.sum }}</span></h3>
          </div>
        </Card>
        </Col>
      </Row>
      </Col>
      <Col span="10">
      <Card>
        <Row>
          <Col span="14">
          <p class="user-detail">OpenId：{{ userInfo.hasOwnProperty('id') ? userInfo.openid : '' }}</p>
          <p class="user-detail">VIP等级：{{ userInfo.hasOwnProperty('id') ? userInfo.vip : '' }}</p>
          <p class="user-detail">累充金额：{{ userInfo.hasOwnProperty('id') ? userInfo.total_money : '' }}</p>
          </Col>
          <Col span="10">
          <p class="user-detail">账户余额：{{ userInfo.hasOwnProperty('id') ? userInfo.coin : '' }}</p>
          <p class="user-detail">累积消费：{{ userInfo.hasOwnProperty('id') ? userInfo.vip_cost : '' }}</p>
          <p class="user-detail">累充点券：{{ userInfo.hasOwnProperty('id') ? userInfo.coin + userInfo.vip_cost : '' }}</p>
          </Col>
          <Col>
          <p class="user-detail">平台余额：{{ userInfo.hasOwnProperty('id') ? userInfo.balance : '' }}</p>
          </Col>
        </Row>
      </Card>
      </Col>
    </Row>
    <Card>
      <div>
        <Table :loading="listLoading" :columns="columnsList" :data="tableData" border disabled-hover />
      </div>
      <div class="margin-top-15" style="text-align: center">
        <Page :total="tableShow.listCount" :current="tableShow.currentPage" :page-size="tableShow.pageSize"
          @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total />
      </div>
    </Card>
  </div>
</template>
<script>
import { getList, backOrder, getMoney, exportList } from '@/api/game-order'
import { getChoose } from '@/api/game-manager'

const editButton = (vm, h, currentRow, index) => {
  if (vm.buttonShow.edit) {
    return h('Poptip', {
      props: {
        confirm: true,
        title: '您确定要补单吗?',
        transfer: true
      },
      on: {
        'on-ok': () => {
          backOrder({
            order_num: currentRow.order_num
          }).then(response => {
            vm.$Message.success(response.data.msg)
            vm.getList()
          })
          currentRow.loading = false
        }
      }
    }, [
      h('Button', {
        style: {
          margin: '0 5px'
        },
        props: {
          type: 'error',
          placement: 'top',
          loading: currentRow.isDeleting,
          disabled: currentRow.status === 1 || currentRow.status === 3 || currentRow.status === 4
        }
      }, '补单')
    ])
  }
}

export default {
  name: 'operate-order',
  data () {
    return {
      nameLoading: false,
      gameNameOption: [],
      gameShow: {},
      columnsList: [
        {
          title: '序号',
          type: 'index',
          width: 65,
          align: 'center'
        },
        {
          title: 'openid',
          align: 'center',
          key: 'openid',
          tooltip: true,
          minWidth: 200
        },
        {
          title: '角色',
          align: 'center',
          render: (h, params) => {
            if (params.row.hero_id === 1001) {
              // return h('span', '驭剑者')
            } else if (params.row.hero_id === 1002) {
              return h('span', '剑影（狐狸）')
            } else if (params.row.hero_id === 1004) {
              return h('span', '炎刃（狼）')
            } else if (params.row.hero_id === 1005) {
              return h('span', '灵剑师（虎）')
            } else if (params.row.hero_id === 1006) {
              return h('span', '双弩游侠（猞猁）')
            } else {
              return h('span', '')
            }
          },
          tooltip: true,
          width: 120
        },
        {
          title: '订单编号',
          align: 'center',
          key: 'order_num',
          minWidth: 180
        },
        // {
        //   title: '平台',
        //   align: 'center',
        //   render: (h, params) => {
        //     if (params.row.platform === 2) {
        //       return h('span', '安卓')
        //     } else {
        //       return h('span', 'IOS')
        //     }
        //   },
        //   tooltip: true,
        //   width: 100
        // },
        {
          title: '来源',
          align: 'center',
          render: (h, params) => {
            if (params.row.platform_from === 1) {
              return h('span', 'IOS')
            } else if (params.row.platform_from === 3) {
              return h('span', '魅族')
            } else if (params.row.platform_from === 4) {
              return h('span', 'VIVO')
            } else if (params.row.platform_from === 5) {
              return h('span', 'OPPO')
            } else {
              return h('span', '安卓')
            }
          },
          tooltip: true,
          width: 100
        },
        {
          title: '订单金额',
          align: 'center',
          key: 'money',
          width: 140
        },
        {
          title: '订单状态',
          align: 'center',
          render: (h, params) => {
            if (params.row.status === 0) {
              return h('span', '待支付')
            } else if (params.row.status === 1) {
              return h('span', '已支付')
            } else if (params.row.status === 3) {
              return h('span', '金手指')
            } else if (params.row.status === 4) {
              return h('span', '线下支付')
            } else {
              return h('span', '支付失败')
            }
          },
          width: 120
        },
        {
          title: '所属游戏',
          align: 'center',
          render: (h, params) => {
            this.getGameName()
            return h('span', this.gameShow[params.row.game_hash])
          },
          width: 140
        },
        {
          title: '交易时间',
          align: 'center',
          key: 'created_at',
          width: 170
        },
        {
          title: '操作',
          align: 'center',
          width: 120,
          render: (h, params) => {
            return h('div', [
              editButton(this, h, params.row, params.index)
            ])
          }
        }
      ],
      tableData: [],
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0
      },
      searchConf: {
        game_hash: '',
        status: '',
        openid: '',
        platform: '',
        date: [],
        order_num: ''
      },
      modalSetting: {
        show: false,
        loading: false,
        index: 0
      },
      buttonShow: {
        edit: true
      },
      listLoading: false,
      total: {},
      today: {},
      range: {},
      userInfo: {}
    }
  },
  created () {
    let vm = this
    vm.getData()
    vm.getGameName()
    vm.hasRule('Order/backOrder').then(res => {
      vm.buttonShow.edit = res
    })
  },
  methods: {
    getGameName (value) {
      if (!this.gameNameOption.length) {
        getChoose({
          keyword: value
        }).then(response => {
          this.gameNameOption = response.data.data.list
          this.gameNameOption.forEach(i => {
            this.gameShow[i.value] = i.label
          })
        })
      }
    },
    setFormDate: function (time) {
      this.searchConf.date = time
    },
    changePage (page) {
      this.tableShow.currentPage = page
      this.getData()
    },
    changeSize (size) {
      this.tableShow.pageSize = size
      this.getData()
    },
    search () {
      this.tableShow.currentPage = 1
      this.getData()
    },
    getData () {
      this.getList()
      this.getMoney()
    },
    download () {
      let d = new Date(new Date().getTime())
      let date = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
      let fileName = `订单-${date}.xlsx`
      exportList({
        ...this.searchConf
      }).then(response => {
        if (response.data.byteLength === 31) {
          this.$Message.error('导出失败,暂无数据')
          return
        }
        if (response.data.byteLength === 32) {
          this.$Message.error('导出失败,数据超过1000条,请联系管理员')
          return
        }
        const data = new Blob([response.data], { type: 'application/octet-stream' })
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          // IE workaround
          window.navigator.msSaveBlob(data, fileName)
        } else {
          // Other browsers
          const url = window.URL.createObjectURL(data)
          const link = document.createElement('a')
          link.href = url
          link.setAttribute('download', fileName)
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        }
      })
    },
    getList () {
      let vm = this
      let params = {
        page: vm.tableShow.currentPage,
        size: vm.tableShow.pageSize,
        ...vm.searchConf
      }
      vm.listLoading = true
      getList(params).then(response => {
        vm.tableData = response.data.data.list
        if (response.data.data.userInfo) {
          vm.userInfo = response.data.data.userInfo
        }
        vm.tableShow.listCount = response.data.data.count
        vm.listLoading = false
      })
    },
    getMoney () {
      let that = this
      let params = {
        date: this.searchConf.date,
        game_hash: this.searchConf.game_hash,
        platform: this.searchConf.platform
      }
      getMoney(params).then(response => {
        that.total = response.data.data.total
        that.today = response.data.data.today
        that.range = response.data.data.range
      })
    }
  }
}
</script>
